<template>
  <view class="searchWrap">
    <view class="searchItemWrap">
      <view class="searchItem" v-for="(item, index) of cListMap" :key="index">
        <view
          :class="[
            'showText',
            {
              isSelect:
                item.searchId || (selectIndex === index && showChildSelect),
            },
          ]"
          @click="handlerSearchItem(index)"
        >
          <view class="text">{{
            item.searchId ? item.children[item.searchIndex].text : item.text
          }}</view>
          <view
            :class="[
              'arrowIconWrap',
              {
                isSelect:
                  item.searchId || (selectIndex === index && showChildSelect),
              },
            ]"
          >
            <up-icon name="arrow-down-fill" size="16rpx" color="" />
          </view>
        </view>
      </view>
    </view>
    <view class="childListWrap">
      <up-transition :show="showChildSelect" mode="slide-top">
        <view class="childList">
          <view
            :class="['childItem', { isSelect: item.selected }]"
            v-for="(item, index) of selectChild"
            :key="index"
            @click="handlerChildItem(item, index)"
          >
            <view class="">{{ item.text }}</view>
            <up-icon
              v-if="item.selected"
              name="checkmark"
              size="24rpx"
              color=""
            />
          </view>
        </view>
      </up-transition>
    </view>
  </view>
  <up-overlay
    :show="showChildSelect"
    zIndex="130"
    opacity="0"
    @click="hideChildSelect"
  ></up-overlay>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import { searchListMap } from "./listMap.js";

const cListMap = ref(searchListMap());
const selectIndex = ref(0);
const showChildSelect = ref(false);
const selectChild = computed(() => {
  return cListMap.value[selectIndex.value].children;
});

const handlerSearchItem = (index) => {
  selectIndex.value = index;
  showChildSelect.value = true;
};
const hideChildSelect = () => {
  showChildSelect.value = false;
};

const handlerChildItem = (item, index) => {
  if (item.selected) return false;
  cListMap.value[selectIndex.value].children.forEach((it, idx) => {
    if (idx === index) it.selected = true;
    else it.selected = false;
  });

  cListMap.value[selectIndex.value].searchIndex = index;
  cListMap.value[selectIndex.value].searchId = item.id;

  hideChildSelect();
};
</script>

<style lang="scss">
.searchWrap {
  position: relative;
}

.searchItemWrap {
  padding: 0 55rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  position: relative;

  .showText {
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 22rpx;
    padding: 32rpx 0;

    .text {
      margin-right: 10rpx;
    }

    &.isSelect {
      color: #36a1ee;
    }

    .arrowIconWrap {
      transform: rotate(0deg);
      transition: all 0.3s linear;
      transform-origin: center center;

      &.isSelect {
        transform: rotate(180deg);
      }
    }
  }
}

.childListWrap {
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 140;
  padding-bottom: 50rpx;
  width: 100%;
}

.childList {
  padding: 0 115rpx 0 55rpx;
  color: #666666;
  font-size: 24rpx;
  box-shadow: 0px 12px 21px 0px rgba(153, 153, 153, 0.35);
  border-radius: 0 0 30rpx 30rpx;
  background: #fff;

  .childItem {
    padding-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &.isSelect {
      color: #36a1ee;
    }
  }
}
</style>
